<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:animate-elem-40-t </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-animate-elem-40-t.html">Full version</a>, <a href="basic-animate-elem-40-t.html">Basic version</a>, <a href="tiny-animate-elem-40-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/animate.html#AnimationElements">19.2 Animation elements</a></p>
 <p>
				<a href="basic-animate-elem-39-t.html">animate-elem-39-t ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-animate-elem-41-t.html">→ animate-elem-41-t</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>animate-elem-40-t</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/animate-elem-40-t.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/animate-elem-40-t.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of animate-elem-40-t" src="../png/basic-animate-elem-40-t.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
            <p>
                This test validates that the x and y attributes can be animated on
                &lt;use&gt;, &lt;image&gt;, &lt;rect&gt; and &lt;text&gt; elements.
                The test also validates that the width and height attributes can 
                be animated on &lt;image&gt; and &lt;rect&gt;
            </p>

            <p>
                For x and y animation, each test shows the reference positions at 
                specific points in the animation. These markers are highlighted 
                at the time the target element's x/y position should match that of
                the marker. For the &lt;text&gt; element, there are two tests. The
                first one tests animating a single value on the text's x and y attributes.
                The second one tests animating x, y values where there are values for each
                of the text's characters. For that test (bottom left), there is a set of 
                reference markers for each of the characters ('1' and '2').
            </p>

            <p>
                For width and height animation (the two tests on the bottom right), the
                outline showing the expected width and height at given points in the animation
                is highlighted at the time the marker's width and height should match that
                of the target element.
            </p>

		</div>
<div class="linkbar"> <p>
				<a href="basic-animate-elem-39-t.html">animate-elem-39-t ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-animate-elem-41-t.html">→ animate-elem-41-t</a>
						</p></div>
</body>
</html>
